<template>
  <view class="page">
    <view class="coupon-list">
      <view class="rol">
        <view class="coupons">
          <template v-if="!isSelectMode">
            <coupon
              v-for="(_coupon, index) in availableCoupons"
              :key="index"
              :coupon="_coupon!"
              @on-expand-after="refreshList"
            ></coupon>
          </template>
          <template v-else>
            <view v-if="availableCoupons.length > 0" class="type-title">
              <span class="title">本单可用的平台券</span>
              <span class="count">{{ availableCoupons.length }}张</span>
            </view>
            <coupon
              v-for="(_coupon, index) in availableCoupons"
              :key="index"
              :coupon="_coupon"
              :available="isNextTimeClickable(_coupon)"
              :select-mode="true"
              :checked="isChecked(_coupon!.id)"
              @on-expand-after="refreshList"
              @select="select(_coupon)"
            ></coupon>
            <view v-if="unAvailableCoupons.length > 0" class="type-title">
              <span class="title">本单不可用的平台券</span>
              <span class="count">{{ unAvailableCoupons.length }}张</span>
            </view>
            <template v-if="isSelectMode">
              <coupon
                :available="false"
                v-for="(coupon, index) in unAvailableCoupons"
                :key="index"
                :coupon="coupon"
                :select-mode="true"
                hide-select-button
                @on-expand-after="refreshList"
              ></coupon>
            </template>
          </template>
        </view>
        <view class="other-supplement">
          <view class="item">已失效的历史优惠券<uni-icons type="right" :size="12"></uni-icons> </view>
        </view>
      </view>
    </view>

    <view class="bottom" :style="{ paddingBottom: safeArea.bottom + 'px' }">
      <view>兑换</view>
      <view @click="toBuyCoupon">
        <uni-icons custom-prefix="iconfont" type="icon-youhuiquan" :size="20" color="#ffad30"></uni-icons>
        <span class="text">购买神券</span>
      </view>
      <view v-if="isSelectMode">
        <span class="confirm-button" @click="submitSelectionResult">确定</span>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import $API from '@/api'
import $store from '@/store'
import { ref, onMounted, computed } from 'vue'
import type { CouponCoreInfo } from '@/types/response/coupon'
import Coupon from '@/components/coupon/index.vue'
import selectModeContext from '../selectModeContext'

const query = defineProps<{
  shopId: number
  availablePreferentialAmount: string
  selectableBatchIds: string
  selected: string
}>()
const { safeArea } = $store.app.getSystemParam()

function toBuyCoupon() {
  uni.navigateTo({ url: '/pages/profile/platform-coupon/buy-coupon/index' })
}

// CouponCoreInfo[]
const coupons = ref<CouponCoreInfo[]>([])

async function refreshList() {
  const result = await $API.coupon.myPlatformCoupons(query.shopId)
  if (result.success) {
    coupons.value = result.data
  }
  // 刷新后，需要置空掉所有选择
  clearSelectedCoupons()
}
// 当页面挂载完时
onMounted(refreshList)
// 当接收到优惠券列表刷新事件时
$store.coupon.couponListRefresh.on(refreshList)

// 选择模式上下文
const {
  availableCoupons,
  isSelectMode,
  unAvailableCoupons,
  isNextTimeClickable,
  select,
  selectedCoupons,
  isChecked,
  clearSelectedCoupons
} = selectModeContext(query, coupons)
// 如果是选择模式，修改title
if (isSelectMode) uni.setNavigationBarTitle({ title: '选择平台优惠券' })

// 提交选择结果
function submitSelectionResult() {
  $store.coupon.selectedPlatformCoupon.emit(selectedCoupons.value.map((item) => item.id))
  setTimeout(() => uni.navigateBack(), 200)
}
</script>

<style scoped lang="scss">
.page {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;

  .coupon-list {
    overflow: scroll;
    padding: 20rpx;
    width: 100%;
    flex-grow: 1;
    box-sizing: border-box;

    .rol {
      position: relative;
      min-height: 100%;

      $list-bottom-height: 50rpx;

      .coupons {
        /** 留给列表底部 */
        padding-bottom: $list-bottom-height;

        .type-title {
          display: flex;
          padding: 0 20rpx;
          height: 80rpx;
          line-height: 80rpx;
          box-sizing: border-box;

          .title {
            font-size: 35rpx;
            font-weight: bold;
            color: #282828;
          }

          .count {
            margin-left: 15rpx;
            font-size: 25rpx;
            color: #595959;
          }
        }
      }

      .other-supplement {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        font-size: 25rpx;
        color: #595959;
        line-height: $list-bottom-height;
      }
    }
  }

  .bottom {
    $bottom-height: 100rpx;

    display: flex;
    width: 100%;
    min-height: $bottom-height;
    font-size: 30rpx;
    color: #595959;
    background-color: #fff;

    > view {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;

      .text {
        display: block;
        line-height: 50rpx;
      }

      .confirm-button {
        width: 80%;
        border-radius: $bottom-height * 0.5;
        text-align: center;
        color: #282828;
        background: linear-gradient(to right, #fedf54, #ffc450);
        line-height: $bottom-height * 0.7;
      }
    }
  }
}
</style>
